/* eslint-disable no-shadow */
/* eslint-disable react/jsx-indent */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, message, Row, Select, Steps, Button, Input, Tabs } from 'antd';
import router from 'umi/router';
import { urlParse } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import HOCSelect from '@/components/AntDesign/Select';
import LocalPolicy from './LocalPolicy/Index';

// 引用组件
const { Step } = Steps;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { Option } = Select;

const steps = [
  {
    title: '维护组合信息',
    content: 'First-content',
  },
  {
    title: '维护标准信息',
    content: 'Second-content',
  },
];

@connect(({ localpolicy }) => ({
  localpolicy,
  dictionaryData: localpolicy.dictionaryData,
  contributorData: localpolicy.contributorData,
  totaldataSource: localpolicy.totaldataSource,
  insuranceIds: localpolicy.insuranceIds,
  addTime: localpolicy.addTime,
  current: localpolicy.current,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {
    distpersonnel: 2,
  };

  componentDidMount() {
    const { dispatch, form, location } = this.props;
    const url = location.search;
    const { areaId } = urlParse(url);
    dispatch({
      type: 'localpolicy/changeCurrent',
      payload: { current: 0 },
    });
    this.setState({
      areaId,
    });
    dispatch({
      type: 'localpolicy/getDictCode',
      payload: ['YES_NO_FLAG', 'BIZ_INS_TYPE', 'CARRY_RULE'],
      callback: response => {
        if (response.success) {
          this.getJoinIdList(areaId);
        }
      },
    });
    const hshdRegFlag = form.getFieldValue(`hshdRegFlag`);
    localStorage.setItem('hshdRegFlag', hshdRegFlag);
  }

  firstNext = () => {
    const { dispatch, location, form } = this.props;
    const { areaId, distpersonnel } = this.state;
    const url = location.search;
    const { information } = urlParse(decodeURIComponent(url));
    if (Number(information) === 0 && Number(distpersonnel) === 1) {
      message.warning('该地区未维护缴费人员类别，不可区分');
    } else {
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          const parameter = {
            areaId,
            insLsPkgName: values.insLsPkgName,
            hshdRegFlag: values.hshdRegFlag,
          };
          // 社保组-校验接口
          dispatch({
            type: 'localpolicy/checkInsLsPkgName',
            payload: parameter,
          });
        }
      });
    }
  };

  // 完成
  prev = () => {
    const { localpolicy, dispatch } = this.props;
    if (localpolicy.groupId) {
      dispatch({
        type: 'localpolicy/checkSaveIns',
        payload: { insLsPkgId: localpolicy.groupId },
      }).then(response => {
        if (response.success) {
          router.goBack();
        } else {
          message.warning(response.message || '服务端未知错误');
        }
      });
    } else {
      message.warning(`险种政策明细缺失，不可保存`);
    }
  };

  // 获取缴费人员类别信息
  getJoinIdList = areaId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'localpolicy/contributorCategory',
      payload: { areaId },
    });
  };

  // 切换缴费人员类别
  ideTabChange = value => {
    const { dispatch, localpolicy } = this.props;
    dispatch({
      type: 'localpolicy/changeMessage',
      payload: { value },
    });

    const paramet = {
      insLsPkgId: localpolicy.groupId,
      joinIdeId: value,
      type: '3',
    };
    // 添加完以后获取该缴费人员下该险种下的所有信息
    dispatch({
      type: 'localpolicy/insuranceInformation',
      payload: paramet,
    });
  };

  // 是否区分缴费人员类别     存了reduc李
  registChange = e => {
    this.setState({
      distpersonnel: e,
    });
  };

  render() {
    const { form, dictionaryData, contributorData, localpolicy, current } = this.props;
    const { distpersonnel } = this.state;
    const formItemLayout = {
      labelCol: { md: { span: 8 } },
      wrapperCol: { md: { span: 8 } },
    };

    const { getFieldDecorator } = form;
    return (
      <div>
        <PageHeaderWrapper />
        <Card style={{ margin: 12 }}>
          <Steps current={current} style={{ width: '700px', margin: '30px auto 0' }}>
            {steps.map(item => (
              <Step key={item.title} title={item.title} />
            ))}
          </Steps>
          <div className="steps-action">
            {current === 0 && (
              <div style={{ marginTop: 70 }}>
                <Form onSubmit={this.handleSubmit}>
                  <Row style={{ marginTop: 40 }}>
                    <FormItem {...formItemLayout} label="组合名称">
                      {getFieldDecorator('insLsPkgName', {
                        rules: [{ required: true, message: '请输入组合名称' }],
                      })(<Input placeholder="请输入" maxLength={30} />)}
                    </FormItem>
                  </Row>
                  <Row>
                    <FormItem {...formItemLayout} label="是否区分缴费人员类别">
                      {getFieldDecorator('hshdRegFlag', {
                        rules: [{ required: true, message: '请选择' }],
                        initialValue: dictionaryData.YES_NO_FLAG
                          ? dictionaryData.YES_NO_FLAG[1].itemCode
                          : '',
                      })(
                        <HOCSelect
                          onChange={this.registChange}
                          style={{ width: '100%' }}
                          placeholder="请选择"
                        >
                          {dictionaryData.YES_NO_FLAG
                            ? dictionaryData.YES_NO_FLAG.map(value => (
                                <Option value={value.itemCode} key={value.itemCode}>
                                  {value.itemName}
                                </Option>
                              ))
                            : null}
                        </HOCSelect>
                      )}
                    </FormItem>
                  </Row>
                </Form>
                <p style={{ textAlign: 'center' }}>
                  <Button
                    style={{ marginLeft: 30, marginTop: 100 }}
                    size="large"
                    type="primary"
                    onClick={() => this.firstNext()}
                  >
                    下一步
                  </Button>
                </p>
                <div
                  style={{
                    borderTop: '1px solid #ccc',
                    color: '#ccc',
                    padding: '30px 0 50px 50px',
                  }}
                >
                  注：组合名称和是否区分缴费人员类别设置后将不可修改
                </div>
              </div>
            )}
            {current === 1 && (
              <div>
                <div>
                  <div style={{ margin: '70px 0' }}>
                    {Number(distpersonnel) === 1 ? (
                      <Tabs
                        defaultActiveKey={contributorData[0] ? contributorData[0].ideId : ''}
                        onChange={this.ideTabChange}
                        type="card"
                      >
                        {contributorData.map(value => (
                          <TabPane tab={value.ideName} key={value.ideId}>
                            <LocalPolicy
                              {...this.props}
                              isprovidentFund={1}
                              viewDataMessage={localpolicy.viewDataMessage}
                              insureArr={localpolicy.insureArr}
                              isaddBtn={1}
                              insuranceInformationData={localpolicy.insuranceInformationData}
                            />
                          </TabPane>
                        ))}
                      </Tabs>
                    ) : (
                      <div>
                        <LocalPolicy
                          {...this.props}
                          isprovidentFund={1}
                          viewDataMessage={localpolicy.viewDataMessage}
                          insureArr={localpolicy.insureArr}
                          isaddBtn={1}
                          insuranceInformationData={localpolicy.insuranceInformationData}
                        />
                      </div>
                    )}
                  </div>
                </div>
                <p style={{ textAlign: 'center' }}>
                  <Button type="primary" style={{ marginLeft: 30 }} onClick={() => this.prev()}>
                    完成
                  </Button>
                </p>
              </div>
            )}
          </div>
        </Card>
      </div>
    );
  }
}
const BasicListFrom = Form.create()(BasicList);
export default BasicListFrom;
